<template>
  <div class="main">
    <div class="app-container">
      <div>
        <h1>业主个人信息认证</h1>
      </div>
      <img
        src="@/assets/images/202207221748589836-1024x858.jpg"
        class="main_img"
        alt="donate"
      />
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="100px"
      >
        <el-row gutter="15"> </el-row>
        <el-form-item label="真实姓名" prop="userName">
          <el-input
            v-model="formData.userName"
            type="text"
            placeholder="请输入真实姓名"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="userIdCard">
          <el-input
            v-model="formData.userIdCard"
            type="text"
            placeholder="请输入身份证号"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input
            v-model="formData.userPhone"
            type="text"
            placeholder="请输入手机号"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" class="loginOutBtn" @click="logout()"
            >退出登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { checkIsOwner } from "@/api/transfer/index";
import { useRouter } from "vue-router";
import { onBeforeUpdate, onMounted, ref } from "vue";
import useUserStore from "@/store/modules/user";

const formRef = ref();
const route = useRouter();
const userStore = useUserStore();
const loginUserId = ref();
const data = reactive({
  formData: {
    userId:undefined,
    userName: undefined,
    userIdCard: undefined,
    userPhone: undefined,
  },
  rules: {
    userName: [
      {
        required: true,
        message: "请输入真实姓名",
        trigger: "blur",
      },
    ],
    userIdCard: [
      {
        required: true,
        message: "请输入身份证号",
        trigger: "blur",
      },
    ],
    userPhone: [
      {
        required: true,
        message: "请输入手机号",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    checkIsOwner(formData.value)
      .then((res) => {
        if (res.code == 200) {
          route.push({
            path: "/home"
          });
        }
      })
      .catch(() => {});
  });
}
/**
 *  @name: 退出登录
 */
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}
/**
 * @name: 钩子函数，获取登录用户的ID
 */
onMounted(() => {
  userStore.getInfo().then((res) => {
    loginUserId.value = res.user.userId;
    data.formData.userId = res.user.userId;
  });
});
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields();
}
</script>
<style scoped>
.main {
  background-color: #d4d4d43c;
  height: 110%;
  overflow: hidden;
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.app-container {
  margin-top: 2%;
  width: 40%;
  margin-left: 30%;
  background-color: #ffffff;
  border-radius: 5%;
}
.main_img {
  width: 100%;
  height: 100%;
  border-radius: 5%;
  margin-bottom: 5%;
}
.loginOutBtn {
  margin-left: 70%;
}
h1 {
  text-align: center;
}
</style>
